/* site loading */
.site-loading {
    width: 100vw;
    text-align: center;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    -webkit-transition: opacity .45s;
    transition: opacity .45s;
    pointer-events: none;
}

.site-loading img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: block;
    width: 65px;
    margin: 0 auto 10px;
    -webkit-animation: loadTween 2s cubic-bezier(.785, .135, .15, .86) infinite;
    animation: loadTween 2s cubic-bezier(.785, .135, .15, .86) infinite
}

#provider:empty+ .site-loading {
    opacity: 1
}

#loading-text {
    font-family: lato, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    color: #777;
    font-size: 16px;
    letter-spacing: 2px
}

#loading-text> span {
    display: inline-block
}

#loading-text> span:first-child {
    -webkit-animation: xLeftMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: xLeftMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

#loading-text> span:last-child {
    -webkit-animation: xRightMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: xRightMatrixR 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

#loading-text> span.blank {
    width: .4em
}

.yoyo-x-5 {
    -webkit-animation: Load5 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load5 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

.yoyo-x-4 {
    -webkit-animation: Load4 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load4 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

.yoyo-x-3 {
    -webkit-animation: Load3 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load3 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

.yoyo-x-2 {
    -webkit-animation: Load2 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load2 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

.yoyo-x-1 {
    -webkit-animation: Load1 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load1 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

.yoyo-x-0 {
    -webkit-animation: Load0 2s cubic-bezier(.645, .045, .355, 1) infinite alternate;
    animation: Load0 2s cubic-bezier(.645, .045, .355, 1) infinite alternate
}

@-webkit-keyframes loadTween {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }

    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }

    to {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg)
    }

}

@keyframes loadTween {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg)
    }

    50% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg)
    }

    to {
        -webkit-transform: rotateX(-180deg);
        transform: rotateX(-180deg)
    }

}

@keyframes hover-animation {
    0% {
        background: #fff;
        border-radius: 50%;
    }

    50% {
        background: #e2dada;
        border-radius: 50%;
    }

    100% {
        background: #fff;
        border-radius: 50%;
    }

}

@-webkit-keyframes hover-animation {
    0% {
        background: #fff;
        border-radius: 50%;
    }

    50% {
        background: #e2dada;
        border-radius: 50%;
    }

    100% {
        background: #fff;
        border-radius: 50%;
    }

}

/*-webkit-keyframes xLeftMatrixR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5);
        transform: translateX(-50px) rotate(-30deg) scale(1.5)
    }
    20% {
        opacity: 0;
        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5);
        transform: translateX(-50px) rotate(-30deg) scale(1.5)
    }
    80% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg) scale(1);
        transform: translateX(0) rotate(0deg) scale(1)
    }
}*/
@keyframes xLeftMatrixR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5);
        transform: translateX(-50px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateX(-50px) rotate(-30deg) scale(1.5);
        transform: translateX(-50px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg) scale(1);
        transform: translateX(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes xRightMatrixR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px) rotate(30deg) scale(1.5);
        transform: translateX(50px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateX(50px) rotate(30deg) scale(1.5);
        transform: translateX(50px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg) scale(1);
        transform: translateX(0) rotate(0deg) scale(1)
    }

}

@keyframes xRightMatrixR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(50px) rotate(30deg) scale(1.5);
        transform: translateX(50px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translateX(50px) rotate(30deg) scale(1.5);
        transform: translateX(50px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0deg) scale(1);
        transform: translateX(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load5 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load5 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load4 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, -30px) rotate(30deg) scale(1.5);
        transform: translate(-30px, -30px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, -30px) rotate(30deg) scale(1.5);
        transform: translate(-30px, -30px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load3 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, -30px) rotate(30deg) scale(1.5);
        transform: translate(-30px, -30px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, -30px) rotate(30deg) scale(1.5);
        transform: translate(-30px, -30px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load2 {
    0% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(-30px, 30px) rotate(-30deg) scale(1.5);
        transform: translate(-30px, 30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, 30px) rotate(30deg) scale(1.5);
        transform: translate(30px, 30px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, 30px) rotate(30deg) scale(1.5);
        transform: translate(30px, 30px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load1 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, 30px) rotate(30deg) scale(1.5);
        transform: translate(30px, 30px) rotate(30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, 30px) rotate(30deg) scale(1.5);
        transform: translate(30px, 30px) rotate(30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes Load0 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@keyframes Load0 {
    0% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    20% {
        opacity: 0;
        -webkit-transform: translate(30px, -30px) rotate(-30deg) scale(1.5);
        transform: translate(30px, -30px) rotate(-30deg) scale(1.5)
    }

    80% {
        opacity: 1;
        -webkit-transform: translate(0) rotate(0deg) scale(1);
        transform: translate(0) rotate(0deg) scale(1)
    }

}

@-webkit-keyframes upDownMove {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

}

@keyframes upDownMove {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

}
